<!DOCTYPE html>
<html lang="en">

<head>
    <title>纯CSS制作绕中轴旋转的立方体</title>
    <meta charset="utf-8">
    <style>
        body {
            background: #000;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <script>
        // 创建正方体
        function createRotator({ perspective = 300,width= 200, duration="5s", borderWidth=3, borderColor="rgb(0, 102, 255)" } = {}) {
            var translateZ= width/2+borderWidth;

            // 正方体6个面的样式
            var child= [{i:1,deg: 0},{i:2,deg: 180},{i:3,deg: 90},{i:4,deg: -90},{i:5,deg: 90},{i:6,deg: -90}]
                        .map(v=>`
                            .___box__lx_>div:nth-child(${v.i}) {
                                transform: rotateY(${v.deg}deg) translateZ(${translateZ}px);
                            }
                        `).join('');

            return `
                <style>
                    .___main__lx_ {
                        perspective: ${perspective}px;
                    }
                    .___box__lx_ {
                        position: relative;
                        width: ${width}px;
                        height: ${width}px;
                        transform-style: preserve-3d;
                        margin: ${width}px auto;
                        animation: ___rotate__lx_ ${duration} linear infinite forwards;
                        animation-play-state: paused;
                    }
                    .___box__lx_>div {
                        position: absolute;
                        width: ${width}px;
                        height: ${width}px;
                        background-color: rgba(0, 102, 255, .3);
                        border: ${borderWidth}px solid ${borderColor};
                    }
                    ${child}
                    @keyframes ___rotate__lx_ {
                        100% {
                            transform: rotateY(-360deg);
                        }
                    }
                    .___box__lx_:hover {
                        animation-play-state: running;
                    }
                </style>
                <div class="___main__lx_">
                    <div class="___box__lx_">
                        ${new Array(6).fill('<div></div>').join('')}
                    </div>
                </div>
                `
        }
        document.getElementById("main").innerHTML= createRotator()
    </script>
</body>

</html>